<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
		<meta name="format-detection" content="telephone=no, email=no">
		<meta name="HandheldFriendly" content="true">
		<title>字母排序</title>
		<link rel="stylesheet" type="text/css" href="../../css/comment.css" />
		<script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="jquery.charfirst.pinyin.js" type="text/javascript" charset="utf-8"></script>
		<script src="sort.js" type="text/javascript" charset="utf-8"></script>
		<style>
			#letter{
				width: 100px;
			    height: 100px;
			    border-radius: 5px;
			    font-size: 75px;
			    color: #555;
			    text-align: center;
			    line-height: 100px;
			    background: rgba(145,145,145,0.6);
			    position: fixed;
			    left: 50%;
			    top: 50%;
			    margin: -50px 0px 0px -50px;
			    z-index: 99;
			    display: none;
			}
			.sort_letter {
			    height: 30px;
			    line-height: 30px;
			    padding-left: 20px;
			    color: #FE715C;
			    font-size: 14px;
			}
			.initials {
			    position: fixed;
			    top: 47px;
			    right: 0px;
			    height: 100%;
			    width: 15px;
			    padding-right: 10px;
			    text-align: center;
			    font-size: 12px;
			    z-index: 99;
			    background: rgba(145,145,145,0);
			}
		</style>
	</head>

	<body>
		<section>
			<div id="letter"></div>
			<div class="st-sort">
				<ul class="st-list sort_box">
					<li class="st-list-item sort_list st-border-b">
						<div class="st-format">
							<span style="background-image: url(../../img/heade.png)"></span>
						</div>
						<div class="st-list-box">
							<h4 class="st-nowarp num_name">北京</h4>
							<p>双行文字</p>
						</div>
					</li>
					<li class="st-list-item sort_list st-border-b">
						<div class="st-format">
							<span style="background-image: url(../../img/heade.png)"></span>
						</div>
						<div class="st-list-box">
							<h4 class="st-nowarp num_name">河南</h4>
							<p>双行文字</p>
						</div>
					</li>
					<li class="st-list-item sort_list st-border-b">
						<div class="st-format">
							<span style="background-image: url(../../img/heade.png)"></span>
						</div>
						<div class="st-list-box">
							<h4 class="st-nowarp num_name">河北</h4>
							<p>双行文字</p>
						</div>
					</li>
					<li class="st-list-item sort_list st-border-b">
						<div class="st-format">
							<span style="background-image: url(../../img/heade.png)"></span>
						</div>
						<div class="st-list-box">
							<h4 class="st-nowarp num_name">上海</h4>
							<p>双行文字</p>
						</div>
					</li>
					<li class="st-list-item sort_list st-border-b">
						<div class="st-format">
							<span style="background-image: url(../../img/heade.png)"></span>
						</div>
						<div class="st-list-box">
							<h4 class="st-nowarp num_name">深圳</h4>
							<p>双行文字</p>
						</div>
					</li>
					<li class="st-list-item sort_list st-border-b">
						<div class="st-format">
							<span style="background-image: url(../../img/heade.png)"></span>
						</div>
						<div class="st-list-box">
							<h4 class="st-nowarp num_name">广东</h4>
							<p>双行文字</p>
						</div>
					</li>
					<li class="st-list-item sort_list st-border-b">
						<div class="st-format">
							<span style="background-image: url(../../img/heade.png)"></span>
						</div>
						<div class="st-list-box">
							<h4 class="st-nowarp num_name">安徽</h4>
							<p>双行文字</p>
						</div>
					</li>
					<li class="st-list-item sort_list st-border-b">
						<div class="st-format">
							<span style="background-image: url(../../img/heade.png)"></span>
						</div>
						<div class="st-list-box">
							<h4 class="st-nowarp num_name">湖北</h4>
							<p>双行文字</p>
						</div>
					</li>
					<li class="st-list-item sort_list st-border-b">
						<div class="st-format">
							<span style="background-image: url(../../img/heade.png)"></span>
						</div>
						<div class="st-list-box">
							<h4 class="st-nowarp num_name">黑龙江</h4>
							<p>双行文字</p>
						</div>
					</li>
					<li class="st-list-item sort_list st-border-b">
						<div class="st-format">
							<span style="background-image: url(../../img/heade.png)"></span>
						</div>
						<div class="st-list-box">
							<h4 class="st-nowarp num_name">海南</h4>
							<p>双行文字</p>
						</div>
					</li>
					<li class="st-list-item sort_list st-border-b">
						<div class="st-format">
							<span style="background-image: url(../../img/heade.png)"></span>
						</div>
						<div class="st-list-box">
							<h4 class="st-nowarp num_name">吉林</h4>
							<p>双行文字</p>
						</div>
					</li>
					<li class="st-list-item sort_list st-border-b">
						<div class="st-format">
							<span style="background-image: url(../../img/heade.png)"></span>
						</div>
						<div class="st-list-box">
							<h4 class="st-nowarp num_name">青海</h4>
							<p>双行文字</p>
						</div>
					</li>
					<li class="st-list-item sort_list st-border-b">
						<div class="st-format">
							<span style="background-image: url(../../img/heade.png)"></span>
						</div>
						<div class="st-list-box">
							<h4 class="st-nowarp num_name">辽宁</h4>
							<p>双行文字</p>
						</div>
					</li>
					<li class="st-list-item sort_list st-border-b">
						<div class="st-format">
							<span style="background-image: url(../../img/heade.png)"></span>
						</div>
						<div class="st-list-box">
							<h4 class="st-nowarp num_name">四川</h4>
							<p>双行文字</p>
						</div>
					</li>
				</ul>
				<div class="st-sort-list initials">
					<ul></ul>
				</div>
			</div>
		</section>
	</body>

</html>